<template>
	<view class="video">
		<view class="topbar">
			<scroll-view scroll-x="true" class="scroll-view" :show-scrollbar="false">
				<view class="rel">
					<view class="item" v-for="(item,index) in navList" :key="index"
					 :class="{active:curNav==item.id}">
						<view class="desc" @click="switchNav(item.id,index)">
							{{item.name}}
						</view>
					</view>
					<!-- 下划线 -->
					<view class="slide"
					:style="'width:'+sliderWidth+'rpx;transform:translateX('+sliderOffset+'rpx)'">
						
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 
			插件使用步骤
				1.uniapp官网找到插件市场
				2.输入插件名称
				3.点击左边：使用HBuilderX导入插件
				4.然后导入uni_modules文件使用
		 -->
		<!-- 视频列表 -->
		<mescroll-uni 
			:down="downOption" 
			:up="upOption" 
			@down="downCallback" 
			@up="upCallback"
		>
			<view class="video-list">
				<view class="video-item" v-for="(item,index) in relatedVideo" :key="index">
					<view class="video-wrap">
						<image :src="item.coverUrl" class="img"></image>
						<view class="desc ellipsis">
							{{item.title}}
						</view>
						<view class="creater-bar flex-box">
							<view class="name">
								{{item.creator[0].userName}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import {apiGetNavList,apiGetVideo} from "@/apis/index.js"
	import MescrollUni from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue"
	export default {
		data(){
			return {
				navList:[],
				curNav:'',   		//当前选中的导航栏
				sliderWidth:60,  	//导航条下面的下划线,默认60
				sliderOffset:30,  	//导航条的偏稳量
				downOption:{		//下拉刷新
					auto:false  	//false即不默认执行
				},
				upOption:{   		//上拉加载下一页
					auto:false,
					page:{
						num:0,     	//起始页
						size:10,	//一页的条数
					}
				},
				relatedVideo:[],	//视频列表
			}
		},
		components:{
			MescrollUni
		},
		onLoad() {
			this.getNavList()
		},
		methods:{
			getNavList(){   //获取导航栏接口
				let self = this
				let obj=[   //接口失效,自己写数据假装接口返回的
					{name:"推荐",id:34571},
					{name:"LOCK直播",id:23472},
					{name:"翻唱",id:33458},
					{name:"广场",id:4652},
					{name:"跳舞",id:658785},
					{name:"游戏",id:62689},
					{name:"现场",id:7456345}
				]
				self.navList = obj
				self.curNav = self.navList[0].id
				let params={
					id:124
				}
				// apiGetNavList(params).then(res => {
				// 	console.log(res);
				// })
				// 自动切换到第一项
				this.switchNav(this.curNav,0)
			},
			// 导航条高亮切换
			switchNav(itemId, index){
				this.curNav = itemId
				// 计算下划线长度
				this.sliderWidth = index === 1 ? 140 : 60
				// 计算偏稳量  左边30 文字间隔64=124  LOCK=80
				this.sliderOffset = 125*index + (index>1?80:16)
				
				// 加载第一项对应的列表, 写在这里每次切换都重新加载
				this.getList(1,5,res=>{//回调
					this.relatedVideo = res  //因为行128直接传了res.data.data所以直接res就是需要的内容
				})
			},
			// successCallback,errCallback是回调函数
			getList(pageNum, pageSize,successCallback,errCallback){	  // 视频列表接口
				let self = this
				 //根据资源id查询
				let params = {
					id:this.curNav,
					pageSize,
					pageNum
				}
				apiGetVideo(params).then(res => {
					successCallback&&successCallback(res.data.data)
				},err=>{
					errCallback&&errCallback()
				})
			},
			downCallback(mescroll){  //下拉刷新执行，组件自带
				// 重置列表为第一页，自动执行page.num = 1,再触发upcallback
				mescroll.resetUpScroll()
			},
			upCallback(mescroll){	//滚到底部上拉刷新执行，组件自带
				// 加载下一页数据
				this.getList(mescroll.num,mescroll.size,res=>{
					// 若是第一页则清空
					if(mescroll.num == 1){
						this.relatedVideo = []
					}
					// 累加数据
					this.relatedVideo = this.relatedVideo.concat(res)
					// 成功的回调，隐藏下拉刷新状态
					mescroll.endSuccess()
				},()=>{
					// 失败的回调，隐藏下拉刷新状态
					mescroll.endErr()
				})
			},
		}
	}
</script>

<style lang="scss">
	.topbar {
		.h86 {
			height: 86rpx;
		}
	}

	.scroll-view {
		position: fixed;
		top: 0;
		width: 100%;
		height: 86rpx;
		white-space: nowrap;
		text-align: center;
		line-height: 86rpx;
		color: #333;
		font-weight: 600;
		border-bottom: 1rpx solid #e6e6e6;
		z-index: 10;
		background: #fff;
		.item {
			position: relative;
			display: inline-block;
			min-width: 126rpx;
			height: 86rpx;
			line-height: 86rpx;
			padding: 0 20rpx;
			&.active{
				color:#f32628;
			}
		}
	}

	.slide {
		position: absolute;
		width: 60rpx;
		height: 4rpx;
		left: 0;
		bottom: 0rpx;
		background: #f32628;
		transition: transform 0.3s;
		z-index: 2;
		/* #ifdef MP-WEIXIN */
		bottom: 2rpx;
		/* #endif */
	}

	.video-list {
		color: #333;
		background: #f8f8f8;
		.tit-bar {
			padding-left: 32rpx;
		}
		.video-item {
			padding-top: 32rpx;
			background: #fff;
			border-bottom: 24rpx solid #f8f8f8;
		}

		.video-wrap {
			width: 686rpx;
			margin: 0 auto;
		}

		.img {
			display: block;
			width: 686rpx;
			height: 390rpx;
			border-radius: 10rpx;
			background: #eee;
		}

		.desc {
			font-size: 30rpx;
			font-weight: 600;
			line-height: 84rpx;
			border-bottom: 1rpx solid #e6e6e6;
		}
	}

	.creater-bar {
		height: 100rpx;
		justify-content: space-between;
		align-items: center;
		.avactor-box {
			align-items: center;
		}
		.avactor {
			width: 66rpx;
			height: 66rpx;
			margin-right: 10rpx;
			border-radius: 66rpx;
			background: #eee;
		}

		.name {
			line-height: 100rpx;
		}
	}
</style>